<template>
  <div>
    <div class="top">
      <div class="fl top-left">考核人员列表</div>
      <!-- <el-input size="small" class="fr top-right" suffix-icon="el-icon-search" placeholder="请输入搜索的姓名或证件号码" /> -->
    </div>
    <div class="body">
      <div class="left">
        <div class="title">
          <div class="fl">成绩列表</div>
          <el-button style="margin-right:10px;margin-top:15px" class="fr" type="primary" size="mini" title="" @click="daochu()">导出成绩</el-button>
        </div>
        <el-table
          max-height="500px"
          :header-cell-style="{
            'background-color': '#FAFAFA',
            'height': '54px',
            'color': '#000000',
            'font-size': '14px',
            'font-weight': 'bold'
        }"
          :data="tableData"
          size="mini"
          empty-text="暂无数据"
          stripe
          style="width: 100%">
          <el-table-column
            label="序号"
            align="center"
            width="80">
              <template slot-scope="scope">
                {{scope.$index + 1}}
            </template>
          </el-table-column>
          <el-table-column
            label="姓名"
            align="center"
            width="80">
              <template slot-scope="scope">
                {{scope.row.examineeListVo.name}}
            </template>
          </el-table-column>
          <el-table-column
            label="成绩"
            align="center">
              <template slot-scope="scope">
                {{scope.row.totalScore||'0'}}分
            </template>
          </el-table-column>
          <el-table-column
            label="状态">
              <template slot-scope="scope">
                <el-tag class="tag" v-if="true">{{scope.row.statusName}}</el-tag>
                <el-tag class="tag" v-if="false" type="success">{{scope.row.statusName}}</el-tag>
                <el-tag class="tag" v-if="false" type="info">{{scope.row.statusName}}</el-tag>
            </template>
          </el-table-column>
        </el-table>
        <!-- <div style="width:100%;height:30px;margin-top: 10px;margin-bottom: 10px;">
          <el-pagination
            style="float:right"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            background
            :hide-on-single-page="false"
            :current-page="tiaojian.page"
            :page-sizes="[10, 20, 50, 100, 500]"
            :page-size="tiaojian.size"
            layout="sizes, prev, pager, next"
            :total="total">
          </el-pagination>
        </div> -->
      </div>
      <div class="right">
        <div class="title">成绩分布</div>
        <div style="border-radius: 2px;width:100%;height:280px;">
          <div id="main" class="fl" style="width: 280px;height:280px;"></div>
          <div class="fl hangs">
            <div v-for="(item, index) in table_score" :key="index" class="hang">
              <div class="icon" :style="{'background-color':option.series[0].color[index]}"></div>
              <span style="color: rgba(0, 0, 0, 0.65);">{{item.name}}</span>
              <span style="margin-top:-6px;margin:0 10px;color:#D6D6D6;font-size:18px">|</span>
              <!-- <span style="color:#D6D6D6;margin-right:16px">{{item.bili}}%</span> -->
              <div style="color: rgba(0, 0, 0, 0.65);">{{item.value}}人</div>
            </div>
          </div>
        </div>
        <div style="width:100%;height:24px;background-color:#F0F2F5"></div>
        <div class="title">各品类占比</div>
        <div class="tongjitu">
          <div id="youxiu" style="width:180px;height:180px"></div>
          <div id="lianghao" style="width:180px;height:180px"></div>
          <div id="jige" style="width:180px;height:180px"></div>
          <!-- <div id="bujige" style="width:180px;height:180px"></div> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
// import { echarts } from 'echarts'
import $http from '@/utils/request'

export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  data () {
    return {
      dialogFormVisible: false,
      span1: 5,
      span2: 7,
      index: 0,
      option: {
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        series: [
          {
            name: '成绩分布',
            type: 'pie',
            color: ['#1890FF','#13C2C2','#2FC25B','#FACC14'],
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '25',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: [
                {value: 0, name: '满分'},
                {value: 1, name: '优秀'},
                {value: 1, name: '及格'},
                {value: 1, name: '不及格'},
            ]
          }
        ]
      },
      option1: {
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        series: [
          {
            name: '成绩分布',
            type: 'pie',
            color: ['#1890FF','#F0F2F5'],
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '15',
                    fontWeight: 'bold',
                     textBorderColor: 'gray'
                }
            },
            labelLine: {
                show: false
            },
            data: [
                {value: 335, name: '优秀'},
                {value: 310, name: '不及格'},
            ]
          }
        ]
      },
      total: 0,
      diyi: 0, // 试卷满分
      youxiu: 0, // 试卷优秀线
      jige: 0, // 试卷及格线
      tableData: [],
      table_score: [{
        name: '满分',
        bili: 0,
        value: 0
      }, {
        name: '优秀',
        bili: 0,
        value: 0
      }, {
        name: '及格',
        bili: 0,
        value: 0
      }, {
        name: '其它',
        bili: 0,
        value: 0
      }],
      form_score: {
        manfen: 0, // 试卷满分
        all: 0, // 所有考生人数
        diyi: 0,
        dier: 0,
        disan: 0,
        disi: 0,
        youxiu: 0,
        lianghao: 0,
        jige: 0,
        bujige: 0
      },
      tiaojian: {
        page: 1,
        size: 10,
        value: ''
      },
      form: {
        computerEndDatetime: '', // 上机结束时间
        computerPlace: '', // 上机地点
        computerStartDatetime: '', // 上机考试时间
        departmentId: '', // 部门
        endDatetime: '', // 结束时间
        examExaminees: [ // 考场-考生，只用填考生id
          {
            examId: '',
            examineeAnswer: '',
            examineeId: '',
            isRight: true,
            questionId: '',
            score: ''
          }
        ],
        examExaminers: [ // 考场-对-考官，只用填考官id
          {
            examId: '',
            examinerId: ''
          }
        ],
        excellentScore: '', // 优秀分数线
        qualifyScore: '', // 及格分数线
        id: '',
        name: '', // 考场名称
        paperId: '', // 试卷
        place: '', // 考场地点
        positionId: '', // 岗位
        professionId: '', // 专业
        rankId: '', // 级别
        startDatetime: '', // 开始时间
        statusId: 1 // 考核状态标识,未开始1，考核中2，考核结束3
      }
    }
  },
  mounted() {
    // this.getData()
    this.getInfo()
    // this.tongjitu()
  },
  methods: {
    getStyle(val) {
      let str = 'background-color: rgba(225, 241, 255, 1);'
      if(val==1) {
        str = 'border: 1px solid rgba(24, 144, 255, 1);'
      }
      if(val==2) {
        str = 'border: 1px solid rgba(217, 217, 217, 1);'
      }
      return str
    },
    getInfo() {
      $http.get('/admin/exam/get/' + this.$route.query.id).then(response => {
        if (response.success) {
          for (let i in this.form) {
            this.form[i] = response.data[i]
          }
          this.diyi = response.data.paper.score
          this.youxiu = response.data.excellentScore
          this.jige = response.data.qualifyScore
          this.getData()
        } else  {
          this.$message({
            message: response.msg,
            type: 'error',
            duration: 2000
          })
        }
      }).catch(error => {
        console.log(error)
      })
    },
    getData() {
      $http.get('/admin/exam/get/score/statistics/' + this.$route.query.id).then(response => {
        if (response.success) {
          this.form_score = {
            manfen: response.data.totalScore,
            all: response.data.scoreList.length,
            diyi: response.data.statisticDistributed.excellent,
            dier: response.data.statisticDistributed.qualify,
            disan: response.data.statisticDistributed.poor,
            disi: 0,
            youxiu: response.data.statisticPercentage.excellent,
            lianghao: response.data.statisticPercentage.qualify,
            jige: response.data.statisticPercentage.poor,
            bujige: response.data.statisticPercentage.lower
          }
          this.form_score.disi = this.form_score.all - this.form_score.diyi - this.form_score.dier - this.form_score.disan
          if (this.form_score.manfen > 40) {
            this.table_score[1].name = (this.form_score.manfen - 10) + '分及以上'
            this.table_score[2].name = (this.form_score.manfen - 20) + '~' + (this.form_score.manfen - 10) + '分'
          }
          if (this.form_score.manfen <= 40) {
            this.table_score[1].name = (this.form_score.manfen - 5) + '分及以上'
            this.table_score[2].name = (this.form_score.manfen - 10) + '~' + (this.form_score.manfen - 5) + '分'
          }
          this.tableData = response.data.scoreList
          // for (let i = 0; i < response.data.scoreList.length; i++) {
          //   if (response.data.scoreList[i].totalScore == this.diyi) {
          //     this.form_score.diyi++
          //   } else if (response.data.scoreList[i].totalScore > this.youxiu) {
          //     this.form_score.youxiu++
          //   } else if (response.data.scoreList[i].totalScore > this.youxiu) {
          //     this.form_score.jige++
          //   } else {
          //     this.form_score.bujige++
          //   }
          // }
          this.table_score[0].value = this.form_score.diyi
          this.table_score[1].value = this.form_score.dier
          this.table_score[2].value = this.form_score.disan
          this.table_score[3].value = this.form_score.disi
          
          // this.table_score[0].bili = (this.form_score.diyi*100)/this.form_score.all
          // this.table_score[1].bili = (this.form_score.youxiu*100)/this.form_score.all
          // this.table_score[2].bili = (this.form_score.jige*100)/this.form_score.all
          // this.table_score[3].bili = 100 - this.tableData[0].bili - this.tableData[1].bili - this.tableData[2].bili
          console.log(this.form_score)
          this.tongjitu()
        } else  {
          this.$message({
            message: response.msg,
            type: 'error',
            duration: 2000
          })
        }
      }).catch(error => {
        console.log(error)
      })
    },
    xiugai() {
      this.form = {}
      this.dialogFormVisible = true
    },
    submit() {},
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.tiaojian.size = val
      this.getData()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.tiaojian.page = val
      this.getData()
    },
    tongjitu() {
      // 基于准备好的dom，初始化echarts实例
      var echarts = require('echarts');
      var myChart = echarts.init(document.getElementById('main'));
      // 绘制图表
      let table = []
      table.push({
        name: this.table_score[0].name,
        value: this.form_score.diyi
      })
      table.push({
        name: this.table_score[1].name,
        value: this.form_score.dier
      })
      table.push({
        name: this.table_score[2].name,
        value: this.form_score.disan
      })
      table.push({
        name: this.table_score[3].name,
        value: this.form_score.disi
      })
      this.option.series[0].data = table
      myChart.setOption(this.option)
      // 当鼠标移入时，如果不是第一项，则把当前项置为选中，如果是第一项，则设置第一项为当前项
      let k = 0
      let j = 0
      for (let i = 0; i < table.length; i++) {
        if (table[i].value > j) {
          k = i
          j = table[i].value
        }
      }
      myChart.dispatchAction({type: 'highlight',seriesIndex: 0,dataIndex:3}); 
      myChart.on('mouseover',function(e){
        if(e.dataIndex != this.index){            
          myChart.dispatchAction({type: 'downplay', seriesIndex: 0, dataIndex:this.index  });     
        }
        if(e.dataIndex == 0){
          myChart.dispatchAction({type: 'highlight',seriesIndex: 0,dataIndex:e.dataIndex});
        }
      });

      //当鼠标离开时，把当前项置为选中 
      myChart.on('mouseout',function(e){
          this.index = e.dataIndex;
          myChart.dispatchAction({type: 'highlight',seriesIndex: 0,dataIndex: e.dataIndex});    
      });


      this.option1.series[0].data = [{
        name: '优秀',
        value: this.form_score.youxiu
      }, {
        name: '其它',
        value: this.form_score.all - this.form_score.youxiu
      }]
      var myChart1 = echarts.init(document.getElementById('youxiu'));
      // 绘制图表
      myChart1.setOption(this.option1)
      myChart1.dispatchAction({type: 'highlight',seriesIndex: 0,dataIndex: 0});
      myChart1.on('mouseover',function(e){
        myChart1.dispatchAction({type: 'downplay',seriesIndex: 0,dataIndex:0}); 
        if(e.dataIndex != this.index){            
          myChart1.dispatchAction({type: 'downplay', seriesIndex: 0, dataIndex:0  });     
        }
        if(e.dataIndex == 0){
          myChart1.dispatchAction({type: 'highlight',seriesIndex: 0,dataIndex:0});
        }
      });
      //当鼠标离开时，把当前项置为选中 
      myChart1.on('mouseout',function(e){
          myChart1.dispatchAction({type: 'highlight',seriesIndex: 0,dataIndex: 0});    
      });


      this.option1.series[0].data = [{
        name: '良好',
        value: this.form_score.lianghao
      }, {
        name: '其它',
        value: this.form_score.all - this.form_score.lianghao
      }]
      this.option1.series[0].color[0] = '#5DDECF'
      var myChart2 = echarts.init(document.getElementById('lianghao'));
      // 绘制图表
      myChart2.setOption(this.option1)
      myChart2.dispatchAction({type: 'highlight',seriesIndex: 0,dataIndex: 0});
      myChart2.on('mouseover',function(e){
        myChart2.dispatchAction({type: 'downplay',seriesIndex: 0,dataIndex:0}); 
        if(e.dataIndex != this.index){            
          myChart2.dispatchAction({type: 'downplay', seriesIndex: 0, dataIndex:0  });     
        }
        if(e.dataIndex == 0){
          myChart2.dispatchAction({type: 'highlight',seriesIndex: 0,dataIndex:0});
        }
      });
      //当鼠标离开时，把当前项置为选中 
      myChart2.on('mouseout',function(e){
          myChart2.dispatchAction({type: 'highlight',seriesIndex: 0,dataIndex: 0});    
      });


      this.option1.series[0].data = [{
        name: '及格',
        value: this.form_score.jige
      }, {
        name: '其它',
        value: this.form_score.all - this.form_score.jige
      }]
      this.option1.series[0].color[0] = '#2FC25B'
      var myChart3 = echarts.init(document.getElementById('jige'));
      // 绘制图表
      myChart3.setOption(this.option1)
      myChart3.dispatchAction({type: 'highlight',seriesIndex: 0,dataIndex: 0});
      myChart3.on('mouseover',function(e){
        myChart3.dispatchAction({type: 'downplay',seriesIndex: 0,dataIndex:0}); 
        if(e.dataIndex != this.index){            
          myChart3.dispatchAction({type: 'downplay', seriesIndex: 0, dataIndex:0  });     
        }
        if(e.dataIndex == 0){
          myChart3.dispatchAction({type: 'highlight',seriesIndex: 0,dataIndex:0});
        }
      });
      //当鼠标离开时，把当前项置为选中 
      myChart3.on('mouseout',function(e){
          myChart3.dispatchAction({type: 'highlight',seriesIndex: 0,dataIndex: 0});    
      });
    },
    daochu() {
      window.location.href = localStorage.getItem('basePath') + '/excel/score/download/' + this.$route.query.id
    }
  }
}
</script>

<style lang="scss" scoped>
.head {
  margin-bottom: 20px;
  width: 100%;
  height: 32px;
  display: flex;
  align-items: center;
}
.label {
  margin-right: 9px;
  min-width: 87px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  border: 1px solid rgba(24, 144, 255, 1);
  font-size: 14px;
  color: rgba(24, 144, 255, 1);
}
.top {
  width: 100%;
  // height: 40px;
  padding-bottom: 20px;
  background-color: white;
}
.top-left {
  line-height: 30px;
  font-size: 20px;
  color: #333333;
}
.top-right {
  width: 272px;
  line-height: 30px;
}
.body {
  margin: 24px 0 30px 24px;
  // padding: 20px 32px 24px 32px;
  width: calc(100% - 48px);
  overflow: hidden;
  // height: calc(100vh - 0px);
  // background-color: white;
}
.left {
  float: left;
  width: calc((100% - 25px)/2);
  background-color: white;
  border-radius: 2px;
}
.right {
  float: right;
  width: calc((100% - 25px)/2);
  background-color: white;
  border-radius: 2px;
}
.title{
  width: 100%;
  height:56px;
  border-bottom: 1px solid rgb(223, 220, 220);
  line-height: 56px;
  padding-left:30px;
  color: rgba(0, 0, 0, 0.85);
  font-size: 16px;
  font-family: PingFangSC-Medium;
  font-weight: bold;
}
.hangs {
  min-width:200px;
  height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.hang{
  width: 100%;
  height: 40px;
  display: flex;
  // justify-content: center;
  align-items: center;
}
.icon{
  margin-right: 8px;
  width:10px;
  height: 10px;
  border-radius: 50%;
}
.tongjitu{
  width:100%;
  height: 210px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.tag{
  min-width: 60px;
  text-align: center;
}
</style>
